<template>
  <div class="region-demo">
    <h2>区域选择组件示例</h2>
    
    <PageForm
      :list="formConfig"
      :form-data="formData"
      :rules="formRules"
    />
    
    <div class="result-display">
      <h3>选择结果：</h3>
      <pre>{{ JSON.stringify(formData, null, 2) }}</pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { PageFormList } from '@/types/PageForm';
import type { FormRules } from 'element-plus';

const formData = ref({
  region: [], // 区域代码数组
  address: '', // 完整地址
  specificAddress: '', // 具体地址
  employee: {
    name: '',
    phone: '',
    position: '',
    region: [],
    workAddress: ''
  }
});

const formRules: FormRules = {
  'employee.name': [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  'employee.phone': [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  region: [
    { required: true, message: '请选择所在地区', trigger: 'change' }
  ]
};

const formConfig: PageFormList = [
  {
    list: [
      {
        component: 'input',
        prop: 'employee.name',
        label: '姓名',
        span: 12,
        componentProps: {
          placeholder: '请输入姓名',
          width: '200px'
        }
      },
      {
        component: 'input',
        prop: 'employee.phone',
        label: '手机号',
        span: 12,
        componentProps: {
          placeholder: '请输入手机号',
          width: '200px'
        }
      }
    ]
  },
  {
    list: [
      {
        component: 'input',
        prop: 'employee.position',
        label: '职位',
        span: 12,
        componentProps: {
          placeholder: '请输入职位',
          width: '200px'
        }
      }
    ]
  },
  {
    list: [
      {
        component: 'cascader',
        prop: 'region',
        label: '所在地区',
        span: 24,
        addressProp: 'address', // 关联地址字段
        cascaderProps: {
          value: 'code',
          label: 'name',
          children: 'children'
        },
        componentProps: {
          placeholder: '请选择省市县',
          width: '300px'
        },
        onChange: (value: number[]) => {
          //console.log('区域变化:', value);
          // 可以在这里处理区域变化的逻辑
        }
      }
    ]
  },
  {
    list: [
      {
        component: 'textarea',
        prop: 'specificAddress',
        label: '详细地址',
        span: 24,
        componentProps: {
          placeholder: '请输入详细地址（街道、门牌号等）',
          rows: 3
        }
      }
    ]
  },
  {
    list: [
      {
        component: 'cascader',
        prop: 'employee.region',
        label: '工作地区',
        span: 24,
        addressProp: 'employee.workAddress',
        cascaderProps: {
          value: 'code',
          label: 'name',
          children: 'children'
        },
        componentProps: {
          placeholder: '请选择工作地区',
          width: '300px'
        }
      }
    ]
  }
];
</script>

<style scoped lang="scss">
.region-demo {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  
  h2 {
    color: #333;
    margin-bottom: 20px;
    border-bottom: 2px solid #409eff;
    padding-bottom: 10px;
  }
  
  .result-display {
    margin-top: 30px;
    padding: 20px;
    background-color: #f5f7fa;
    border-radius: 8px;
    
    h3 {
      color: #606266;
      margin-bottom: 15px;
    }
    
    pre {
      background-color: #fff;
      padding: 15px;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      font-size: 12px;
      color: #303133;
      overflow-x: auto;
    }
  }
}
</style>
